<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="my-form">
      <form-maker ref="myForm" :field-option="option" @submit="submit" />
    </div>
    <component-a />
    <component-b />
  </div>
</template>

<script>
import FormMaker from '@/components/FormMaker';
import Vue from 'vue';
Vue.component('component-a', {
  data() {
    return { stateA: this.$store.state };
  },
  created() {
    console.log(this.$store);
  },
  template: `<div>AState:{{stateA.message}}</div>`
});
Vue.component('component-b', {
  data() {
    return { stateB: this.$store.state };
  },
  created() {
    console.log(this.$store);
  },
  template: `<div>BState:{{stateB.message}}</div>`
});
export default {
  components: { FormMaker },
  data() {
    const _this = this;
    return {
      form: null,
      hello: '',
      option: {},
      fieldOption: {
        layout: 'inline',
        columns: [
          {
            label: '性别',
            fieldType: 'select',
            placeholder: '请选择性别',
            style: 'width: 200px',
            key: 'sex',
            options: [
              {
                value: 1,
                label: '男'
              },
              {
                value: 2,
                label: '女'
              }
            ]
          },
          {
            label: '账号',
            fieldType: 'input',
            placeholder: '请输入账号',
            initialValue: '123123',
            key: 'username',
            rules: [{ required: true, message: 'Please input your nickname' }]
          },
          {
            label: '密码',
            fieldType: 'input',
            type: 'password',
            placeholder: '请输入密码',
            key: 'password'
          },
          {
            fieldType: 'button',
            type: 'primary',
            htmlType: 'submit',
            innerHTML: '登录'
          },
          {
            fieldType: 'button',
            innerHTML: '清除',
            click: function() {
              console.log(_this.$store.state.message);
              _this.$store.commit('increment');
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.form = this.$refs.myForm.form;
  },
  created() {
    this.option = this.fieldOption;
  },
  methods: {
    submit(query, ref) {
      console.log('obj', ref.getFieldsValue());
      console.log(this.form);
      this.form.validateFields((err, value) => {
        console.log(err);
      });
    },
    changeForm() {
      this.option = this.fieldOption1;
    }
  }
};
</script>

